<template>
  <el-row v-loading='loading'>
  
    <el-col :xs='24' :md='14' :style="{height: '315px'}">
      <vue-cropper
        ref='cropper'
        :img='options.img'
        :info='true'
        :autoCrop='options.autoCrop'
        :autoCropWidth='options.autoCropWidth'
        :autoCropHeight='options.autoCropHeight'
        :fixedBox='options.fixedBox'
        :enlarge='options.enlarge'
        @realTime='realTime'
      />
    </el-col>
    <el-col :xs='24' :md='10' :style="{height: '315px'}">
      <div class='avatar-upload-preview'>
        <img :src='options.previews.url' :style='options.previews.img'/>
      </div>
    </el-col>
  </el-row>
  <br/>
  <el-row>
    <el-col :lg='2' :md='2'>
      <el-upload action='#' :http-request='requestUpload' :show-file-list='false' :before-upload='beforeUpload' :on-succes="onSucces">
        <el-button>
          选择 
          <el-icon class='el-icon--right'>
            <Upload/>
          </el-icon>
        </el-button>
      </el-upload>
    </el-col>
    <el-col :lg='{span: 1, offset: 2}' :md='2'>
      <el-button :icon='Plus' @click='changeScale(1)'></el-button>
    </el-col>
    <el-col :lg='{span: 1, offset: 1}' :md='2'>
      <el-button :icon='Minus' @click='changeScale(-1)'></el-button>
    </el-col>
    <el-col :lg='{span: 1, offset: 1}' :md='2'>
      <el-button :icon='RefreshLeft' @click='rotateLeft()'></el-button>
    </el-col>
    <el-col :lg='{span: 1, offset: 1}' :md='2'>
      <el-button :icon='RefreshRight' @click='rotateRight()'></el-button>
    </el-col>
    <el-col :lg='{span: 2, offset: 6}' :md='2'>
      <el-button type='primary' @click='uploadImg()'>确认封面</el-button>
    </el-col>
  </el-row>

</template>

<script setup>
import 'vue-cropper/dist/index.css';
import {ElMessage} from 'element-plus';
import {Upload, RefreshRight, RefreshLeft, Minus, Plus} from '@element-plus/icons-vue'
import {VueCropper} from 'vue-cropper';
import {UploadPicMin} from '@/utils/minioUpload';
import useUserStore from '@/store/modules/user'
const loading = ref(false);
const props = defineProps({
  bkCover: {
    type: String,
    default: '',
  },
});

const {proxy} = getCurrentInstance();

const emits = defineEmits(['coverEvent']);

//图片裁剪数据
const options = reactive({
  img: props.bkCover, // 裁剪图片的地址
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 500, // 默认生成截图框宽度
  autoCropHeight: 280, // 默认生成截图框高度
  fixedBox: true, // 固定截图框大小 不允许改变
  previews: {}, //预览数据
  enlarge: 1,
});


/** 编辑头像 */
function editCropper() {
  open.value = true;
}


/** 打开弹出层结束时的回调 */
function modalOpened() {
  visible.value = true;
}

/** 覆盖默认上传行为 */
function requestUpload() {
}

/** 向左旋转 */
function rotateLeft() {
  proxy.$refs.cropper.rotateLeft();
}

/** 向右旋转 */
function rotateRight() {
  proxy.$refs.cropper.rotateRight();
}

/** 图片缩放 */
function changeScale(num) {
// console.log(num)
  num = num || 1;
  proxy.$refs.cropper.changeScale(num);
}

/** 上传预处理 */
function beforeUpload(file) {

  if (file.type.indexOf('image/') == -1) {
    ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG，webp,gif后缀的文件。');
  } else {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
      options.img = reader.result;
    };
  }

}



/** 上传图片 */
function uploadImg() {
  loading.value = true;
  proxy.$refs.cropper.getCropBlob(async data => {
    
    let file = new window.File(
      [data],
      'demoimg.jpg',
      {type: data.type},
    );

 
 const url = URL.createObjectURL(data);

    let cover_id= await UploadPicMin(file,data);
    emits('coverEvent', url,cover_id);
    loading.value = false;
  });
}


/** 实时预览 */
function realTime(data) {
  options.previews = data;
}

/** 关闭窗口 */
function closeDialog() {
  options.img = useUserStore().avatar;
  options.visible = false;
}
</script>

<style lang='scss' scoped>
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}

.avatar-upload-preview {
  position: absolute;
  bottom: 0;
  left: 600px;
  width: 500px;
  height: 280px;
  border-radius: 6px;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
  transform-origin: left bottom;
  transform: scale(0.65);
  background: #000;
}

</style>
